<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%@include file="/WEB-INF/pages/include/css-resource.jsp"%>
<title>角色管理</title>
<style type="text/css">
.row {
	margin-bottom: 10px;
}
</style>
</head>
<body>
	<%@include file="/WEB-INF/pages/include/header.jsp"%>

	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a
				href="${pageContext.request.contextPath}/main.html"><i
					class="fas fa-home"></i>主页</a></li>
			<li class="breadcrumb-item active" aria-current="page">角色管理</li>
		</ol>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<form class="form-inline" id="condationForm"
					action="${pageContext.request.contextPath}/app/role/index.html"
					method="post">
					<label class="my-1 mr-2" for="name">角色：</label>
					<div class="input-group mb-3">
						<input type="hidden" id="page" name="page" value="${page}">
						<input type="hidden" id="size" name="size" value="${size}">
						<input type="text" class="form-control" id="name" name="name"
							placeholder="请输入角色名称" value="${name}">
						<div class="input-group-append">
							<button type="submit" class="btn btn-primary">
								<i class="fas fa-search"></i>&nbsp;查询
							</button>
						</div>
					</div>
				</form>
				<hr style="border: 1px solid #ccc;" />
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<a class="btn btn-primary" href="" title="添加" data-toggle="modal"
					data-target="#addRoleModal"> <i class="fas fa-plus"></i>&nbsp;添加
				</a> <a class="btn btn-primary"
					href="${pageContext.request.contextPath}/app/role/add.html"
					title="添加"> <i class="fas fa-plus"></i>&nbsp;批量添加
				</a> <a class="btn btn-success" href="javascript:refresh()" title="刷新">
					<i class="fas fa-sync-alt"></i>&nbsp;刷新
				</a> <a class="btn btn-secondary float-right"
					href="${pageContext.request.contextPath}/main.html" title="返回">
					<i class="fas fa-reply"></i>&nbsp;返回
				</a>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover table-sm">
					<thead>
						<tr>
							<th scope="col">#</th>
							<th scope="col">角色名称</th>
							<th scope="col">禁用否</th>
							<th scope="col">创建时间</th>
							<th scope="col">操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${list}" var="obj" varStatus="s">
							<tr>
								<th scope="row">${s.count}</th>
								<td>${obj.name}</td>
								<td>
									<div class="custom-control custom-checkbox mr-sm-2">
										<input type="checkbox" class="custom-control-input"
											onchange="changeDisabled('${obj.id}')" id="c${obj.id}"
											${obj.disabled?"checked":""}> <label
											class="custom-control-label" for="c${obj.id}" id="l${obj.id}">${obj.disabled?"禁用":"未禁用"}</label>
									</div>
								</td>
								<td><fmt:formatDate value="${obj.creationTime}"
										pattern="yyyy-mm-dd hh:MM:ss" /></td>
								<td><a class="btn btn-info btn-sm"
									href="${pageContext.request.contextPath}/app/role/edit/${obj.id}"
									title="编辑"> <i class="fas fa-edit"></i>
								</a>&nbsp;&nbsp;<a class="btn btn-danger btn-sm"
									href="javascript:del('${obj.id}',${page},${size})" title="删除">
										<i class="fas fa-trash-alt"></i>
								</a></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">第&nbsp;${page}&nbsp;页，共&nbsp;${total}&nbsp;页（每页显示&nbsp;${size}&nbsp;条，总共&nbsp;${count}&nbsp;条记录）</div>
			<div class="col-md-6 text-right">
				<nav class="text-right float-right">
					<ul class="pagination">
						<li class="page-item"><a class="page-link"
							href="javascript:page('1','${size}')">第一页</a></li>

						<c:choose>
							<c:when test="${page==1}">
								<li class="page-item disabled"><span class="page-link">上一页</span></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a class="page-link"
									href="javascript:page('${page-1}','${size}')">上一页</a></li>
							</c:otherwise>
						</c:choose>

						<c:choose>
							<c:when test="${page==total}">
								<li class="page-item disabled"><span class="page-link">下一页</span></li>
							</c:when>
							<c:otherwise>
								<li class="page-item">
								<li class="page-item"><a class="page-link"
									href="javascript:page('${page+1}','${size}')">下一页</a></li>
							</c:otherwise>
						</c:choose>
						<li class="page-item"><a class="page-link"
							href="javascript:page('${total}','${size}')">最后一页</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div>

	<div class="modal fade" id="addRoleModal" data-backdrop="static"
		tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel"
		aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">添加角色</h5>
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form id="addForm">
						<div class="form-group row">
							<label for="code"
								class="col-sm-2 col-md-2 col-form-label text-danger">角色编码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="code" name="code"
									required autofocus>
							</div>
						</div>
						<div class="form-group row">
							<label for="name"
								class="col-sm-2 col-md-2 col-form-label text-danger">角色名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="roleName"
									name="name" required>
							</div>
						</div>
						<div class="form-group row">
							<label for="mnemonic" class="col-sm-2 col-md-2 col-form-label">助记码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="mnemonic"
									name="mnemonic" required>
							</div>
						</div>
						<div class="form-group row">
							<label for="disabled" class="col-sm-2 col-md-2 col-form-label"></label>
							<div class="col-sm-10">
								<div class="custom-control custom-checkbox mr-sm-2">
									<input type="checkbox" class="custom-control-input"
										id="disabled" name="disabled"> <label
										class="custom-control-label" for="disabled">禁用</label>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" onclick="save()">保存</button>
					<button type="button" class="btn btn-secondary"
						data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>

	<%@include file="/WEB-INF/pages/include/js-resource.jsp"%>

	<script type="text/javascript">
		function del(id, page, size) {
			r = confirm("此操作将永久性的删除数据不可恢得，是否继续？");
			if (r) {
				window.location.href = "${pageContext.request.contextPath}/app/role/delete/"
						+ page + "/" + size + "/" + id;
			}
		}
		function changeDisabled(id) {
			checked = $("#c" + id).is(":checked");
			$
					.ajax({
						url : "${pageContext.request.contextPath}/api/role/change/disabled/"
								+ id + "/" + checked,
						type : "POST",
						dataType : "json",
						success : function(result) {
							if (result.code == 0) {
								$("#l" + id).text(checked ? "禁用" : "未禁用");
							}
							alert(result.message);
						},
						error : function(err) {
							alert("数据更改失败！");
							console.log(err);
						}
					});
		}
		function refresh() {
			$("#condationForm").submit();
		}
		function page(page, size) {
			$("#page").val(page);
			$("#size").val(size);
			$("#condationForm").submit();
		}
		function save() {
			code = $("#code").val();
			if (code == null || code == "") {
				alert("请输入角色编码！");
				return;
			}
			name = $("#roleName").val();
			if (name == null || name == "") {
				alert("请输入角色名称！");
				return;
			}
			$.ajax({
				url : "${pageContext.request.contextPath}/api/role/save",
				type : "POST",
				data : {
					code : code,
					name : name,
					mnemonic : $("#mnemonic").val(),
					disabled : $("#disabled").is(":checked")
				},
				dataType : "json",
				success : function(result) {
					if (result.code === 0) {
						alert(result.message);
						$("#addRoleModal").modal("hide");
					} else {
						alert(result.message);
					}
					$("#addForm")[0].reset();
				},
				error : function(err) {
					alert("保存数据失败！");
					console.log(err);
				}
			});
		}
	</script>
</body>
</html>